<!-- hbox layout -->
<div class="hbox hbox-auto-xs bg-light " ng-controller="JVectorMapDemoCtrl">

  <!-- column -->
  <div class="col item">
    <script>
      $(function(){
        $('#world-map-gdp').vectorMap({
          map: 'us_aea_en',
          markers: [
            {latLng: [29, -74.00], name: 'New York', offsets: [0, 2]},
            {latLng: [34.05, -118.24], name: 'Los Angeles', offsets: [0, 2]},
            {latLng: [41.87, -87.62], name: 'Chicago', offsets: [0, 2]},
            {latLng: [29.76, -95.36], name: 'Houston', offsets: [0, 2]},
            {latLng: [39.95, -75.16], name: 'Philadelphia', offsets: [0, 2]},
            {latLng: [38.90, -77.03], name: 'Washington', offsets: [0, 2]},
            {latLng: [37.36, -122.03], name: 'Silicon Valley', offsets: [0, 2]}
          ],
          normalizeFunction: 'polynomial',
          backgroundColor: 'transparent',
          zoomMin: 0.6,
          regionsSelectable: true,
          markersSelectable: true,
          regionsSelectableOne: true,
          markersSelectableOne: true,
          focusOn: {
            x:0,
            y:0,
            scale: 1
          },

          series: {
            markers: [{
              attribute: 'r',
              scale: [5, 15],
              values: [
                100.00,
                255.16,
                310.69,
                605.17,
                248.31,
                107.35,
                217.22
              ]
            }],
            regions:[{
              scale: {
                white: '#9faad3'
              },
              attribute: 'fill',
              values: {
                'US-VA':'white'
              }
            }]
          },
          regionStyle: {
            initial: {
              fill: '#b4edff',
              'fill-opacity': 0.4,
              stroke: '#FFF',
              'stroke-width': 1,
              'stroke-opacity': 1
            },
            hover: {
              fill: '#b4edff',
              'fill-opacity': 0.8
            },
            selected: {
              fill: '#b4edff'
            }
          },
          markerStyle: {
            initial: {
              fill: '#ffffff',
              stroke: '#fff',
              r: 10
            },
            hover: {
              stroke: '#fff'
            },
            selected: {
              fill: '#ff5500'
            }
          },
          onRegionClick: function(event, code){
            alert(code);
          },
          labels: {
            regions: {
              render: function(code){
                var doNotShow = ['US-VA','US-ND','US-NM','US-VT'];

                if (doNotShow.indexOf(code) === -1) {
                  return code.split('-')[1];
                }
              },
              offsets: function(code){
                return {
                  '公猪站': [0, 0]
                }[code.split('-')[1]];
              }
            }
          },
          regionLabelStyle:
            {
              initial: {
                'font-family': 'Microsoft Yahei',
                        'font-size': '16',
                        cursor: 'default',
                        fill: '#fff',
                        'font-weight': 'normal'
              },
              hover: {
                cursor: 'pointer'
              }
            }

        });
      });
    </script>
    <div id="world-map-gdp" class="h-full" style="height: 99.8%;min-height:600px;background-image: url('img/farm-bg.jpg');background-size:100% 100%;"></div>

    <div id="id-box" class="top text-white" style="top:20px;left:60px;display:none;">
      <div class="panel w-xl no-bg b-monitor">
        <div class="panel-heading">
          <a href class="pull-right" ng-click="isCollapsed = !isCollapsed" ui-toggle-class>
            <i class="fa fa-angle-up text"></i>
            <i class="fa fa-angle-down text-active"></i>
          </a>
          <span>监控现况</span>
        </div>
        <div collapse="isCollapsed">
          <div class="panel-body bg-monitor b-monitor">
            <div class="scrollable" style="max-height:110px" ui-jq="slimScroll" ui-options="{height:'110px', size:'6px'}">
              <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id neque quam. Aliquam sollicitudin venenatis ipsum ac feugiat.
              </p>
              <p>
              Vestibulum ullamcorper sodales nisi nec condimentum. Mauris convallis mauris at pellentesque volutpat.
              </p>
            </div>
          </div>

        </div>
      </div>
    </div>
    <div class="bottom text-right w-full wrapper-lg" >
      <div class=" b-monitor text-white" style="padding-right: 320px;">
        <i class="fa fa-circle text-success m-r-xs m-l"></i>
        <span class="m-r-xs">正常</span><span class="text-2x font-thin num-style">37</span>
        <i class="fa fa-circle text-warning m-r-xs m-l"></i>
        <span class="m-r-xs">空栏</span><span class="text-2x font-thin num-style">0</span>
        <i class="fa fa-circle text-danger m-r-xs m-l"></i>
        <span class="m-r-xs">预警</span><span class="text-2x font-thin num-style">0</span>
        <i class="fa fa-circle text-muted m-r-xs m-l">
        </i><span class="m-r-xs">离线</span><span class="text-2x font-thin num-style">0</span>
      </div>
    </div>
  </div>
  <!-- /column -->

</div>
<!-- /hbox layout -->

<!-- column -->
<div class="app-aside-right pos-fix no-padder m w-md w-auto-xs bg-white b-l animated fadeInRight">
  <div class="vbox">
    <div class="wrapper b-b b-light">设备列表</div>
    <div class="row-row">
      <div class="cell scrollable hover">
        <div class="cell-inner">
          <div class="wrapper-md">
            This is the scrollable content
            <p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
            You got the bottom
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper b-t b-light text-center">
      <p>Footer with fluid height</p>
      <a href class="btn btn-info">Create Marker</a>
    </div>
  </div>
</div>
<!-- /column -->